<template>
	<div>
		<el-col :span="12">
            <div class="top-item" @click="itemClick">
                <div><img :src="info.coverImgUrl" class="cover" /></div>
                <div class="right" v-if="topDetail && topDetail.tracks &&  topDetail.tracks.length">
                    <div v-for="(item,index) in topDetail.tracks" :key="index">
                        <div :key="index"  class="song-item">
                          {{index+1}}  {{item.first}}
                          <span class="gray">- {{item.second}}</span>
                        </div>
                    </div>
                </div>
              <div  class="right" v-else>
                <el-skeleton  :rows="3" animated  />
              </div>
            </div>
        </el-col>
	</div>
</template>
<script>
export default{
  props: {
    id: Number,
    info: Object,
    topDetail: Object
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    itemClick () {
      this.$router.push({ name: 'playlist-detail', query: { id: this.info.id } })
    },
    playClick () {
      this.$store.dispatch('playPlaylist', this.info.id)
    }

  }
}
</script>
<style lang="scss" scoped>
    .top-item{
        display: flex;
        margin-bottom:20px;
        background:#f0f0f0;

        .cover{
            width:127px;
            height:auto;
        }
        .cover:hover{
            cursor:pointer;
        }
        .right{
            padding: 15px;
            line-height: 2;
            font-size: 14px;
            overflow: hidden;
            flex: auto;
            .song-item{
                white-space: nowrap;
                /*width: 100%;                  !* IE6 需要定义宽度 *!*/
                overflow: hidden;
                /*-o-text-overflow: ellipsis;    !* Opera *!*/
                text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
            }
            .song-item:hover{
                cursor:pointer;
            }
            .gray{
                color: #666;
            }
          /deep/.el-skeleton{
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }
    }

</style>